<template>
  <div
    v-if="(props.dataList || []).length > 0"
    id="certify"
    class="certify-container"
  >
    <div class="swiper-container">
      <Swiper
        :modules="[Controller, Autoplay]"
        :watchSlidesProgress="true"
        :slidesPerView="'auto'"
        :centeredSlides="true"
        :loop="hasMultipleSlides"
        :loopedSlides="(props.dataList || []).length"
        :autoplay="{
          delay: 3000,
          disableOnInteraction: false,
          waitForTransition: true,
        }"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }"
        @progress="handleProgress"
        @setTransition="handleSetTransition"
        ref="certifySwiper"
        @slideChange="handleSlideChange"
        @swiper="onSwiperInit"
      >
        <!-- 轮播项（仅在有数据时渲染） -->
        <template v-if="(props.dataList || []).length > 0">
          <SwiperSlide
            v-for="(slide, imgIndex) in dataList"
            :key="`slide-${imgIndex}`"
            @click="handleSlideClick(imgIndex)"
            class="slide-item"
          >
            <!-- 图片容器 -->
            <div class="slide-img-container">
              <img
                :src="slide.url"
                :alt="`图片 ${imgIndex + 1}`"
                class="slide-img"
                loading="lazy"
              />
              <!-- 遮罩层 - 通过动态class控制显示 -->
              <div
                class="slide-mask"
                :class="{ 'mask-hidden': isCurrentSlide(imgIndex) }"
              ></div>
            </div>
          </SwiperSlide>
        </template>

        <!-- 分页器 -->
        <template #pagination v-if="(props.dataList || []).length > 0">
          <div class="swiper-pagination">
            <span
              v-for="(item, index) in dataList"
              :key="`pagination-${index}`"
              @click="handlePaginationClick(index)"
              :class="{ active: currentIndex === index }"
              :aria-current="currentIndex === index ? 'page' : undefined"
            ></span>
          </div>
        </template>
      </Swiper>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, onMounted, onUnmounted } from "vue";
import { Controller, Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import type { Swiper as SwiperInstance } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/autoplay";

// 定义图片数据类型接口
interface SlideItem {
  url: string;
  [key: string]: any; // 允许额外属性
}

// 定义组件属性
const props = defineProps<{
  dataList?: SlideItem[]; // 允许不传递，使用默认值
}>();

// 计算属性 - 判断是否有多个幻灯片
const hasMultipleSlides = computed(() => (props.dataList || []).length > 1);

// 状态管理
const certifySwiper = ref<HTMLElement | null>(null);
const currentIndex = ref(0);
const swiperInstance = ref<SwiperInstance | null>(null);

// 判断是否为当前轮播图
const isCurrentSlide = (index: number) => currentIndex.value === index;

// 监听Swiper初始化完成
const onSwiperInit = (swiper: SwiperInstance) => {
  swiperInstance.value = swiper;
  currentIndex.value = swiper.realIndex;
};

// 轮播图点击切换
const handleSlideClick = (index: number) => {
  if (swiperInstance.value && (props.dataList || []).length) {
    swiperInstance.value.slideToLoop(index);
    currentIndex.value = index;
  }
};

// 分页器点击切换
const handlePaginationClick = (index: number) => {
  if (swiperInstance.value && (props.dataList || []).length) {
    swiperInstance.value.slideToLoop(index);
    currentIndex.value = index;
  }
};

// 轮播切换时更新索引
const handleSlideChange = (swiper: SwiperInstance) => {
  currentIndex.value = swiper.realIndex;
};

// 进度更新处理
const handleProgress = (swiper: SwiperInstance) => {
  const containerWidth = swiper.width;
  const baseTranslate = containerWidth * 0.15; // 基于容器宽度的偏移量
  
  swiper.slides.forEach((slide: any) => {
    const slideProgress = slide.progress;
    const modify =
      Math.abs(slideProgress) > 1 ? (Math.abs(slideProgress) - 1) * 0.3 + 1 : 1;

    const translate = `${slideProgress * modify * baseTranslate}px`;
    const scale = 1 - Math.abs(slideProgress) / 5;
    const zIndex = 999 - Math.abs(Math.round(10 * slideProgress));

    Object.assign(slide.style, {
      transform: `translateX(${translate}) scale(${scale})`,
      zIndex,
      opacity: Math.abs(slideProgress) > 3 ? 0 : 1,
    });
  });
};

// 过渡动画处理
const handleSetTransition = (swiper: SwiperInstance, transition: number) => {
  swiper.slides.forEach((slide: any) => {
    slide.style.transition = `${transition}ms`;
  });
};

// 初始化时确保自动轮播启动
onMounted(() => {
  const startTimer = setTimeout(() => {
    if (swiperInstance.value && props.dataList?.length) {
      swiperInstance.value.autoplay.start();
    }
    clearTimeout(startTimer);
  }, 1000);
});
</script>

<style lang="scss" scoped>
.certify-container {
  width: 100%;
  position: relative;
  padding: 30px 0;
  background: #f7f7f7;

  .swiper-container {
    width: 100%;
    // max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .swiper-pagination {
    width: 100%;
    bottom: 20px;
    text-align: center;

    span {
      margin: 0 5px;
      border: 3px solid #fff;
      background-color: #d5d5d5;
      width: 10px;
      height: 10px;
      opacity: 1;
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
      transition: all 0.3s ease;

      &.active {
        border: 3px solid #00aadc;
        background-color: #fff;
      }
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    &::after {
      content: "";
    }
  }

  .swiper-button-next {
    right: -30px;
    background-position: 0 -93px;

    &:hover {
      background-position: 0 -139px;
    }
  }
}

.slide-item {
  // 使用基于容器宽度的响应式尺寸
  width: 80%;
  max-width: 1030px; // 图片原始宽度
  // 高度根据宽高比自动计算 (1030/528 ≈ 1.95)
  aspect-ratio: 1030 / 528;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: 0 8px 30px #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.slide-img-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover; // 保持图片比例，裁剪多余部分
  transition: all 0.5s ease;
  position: relative;
  z-index: 4;
}

.slide-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
  pointer-events: none;

  &.mask-hidden {
    opacity: 0;
  }
}

// 响应式设计
@media screen and (max-width: 1200px) {
  .certify-container .swiper-container {
    padding: 0 15px;
  }
  
  .slide-item {
    width: 85%;
  }
}

@media screen and (max-width: 992px) {
  .certify-container {
    padding: 20px 0;
    
    .swiper-container {
      padding: 0 10px;
    }
  }
  
  .slide-item {
    width: 90%;
  }
}

@media screen and (max-width: 768px) {
  .certify-container {
    padding: 15px 0;
    
    .swiper-container {
      padding: 0 5px;
    }
  }
  
  .slide-item {
    width: 95%;
    // 移动端减少阴影效果
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  .swiper-pagination {
    bottom: 10px;
    
    span {
      width: 8px;
      height: 8px;
      border-width: 2px;
    }
  }
}

@media screen and (max-width: 576px) {
  .slide-item {
    width: 98%;
  }
}
</style>